<template>
  <!-- <div id="mainwagersoldedgague" style="width: 100%; height: 100%"></div> -->
  <div style="diaplay:flex;flex-direction: column; width: 100%; height: 100%">
    <div id="four" style="width: 100%; height: 90%;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props:['waterSoledRatio'],
  data() {
    return {
      chart: null,
      chartData: [],
      optiondata: null,
      momWaterRatio:"",
      qoqWaterRatio:'',
    };
  },
  watch: {
    // waterSoledRatio(){
    //   this.momWaterRatio=this.waterSoledRatio.momWaterRatio
    //   this.qoqWaterRatio=this.waterSoledRatio.qoqWaterRatio
    //   // this.chartData=[]
    //   // for (let i in this.waterSoledRatio){
    //   //   this.chartData.push(this.waterSoledRatio[i])
    //   // }
    //   this.initChart()
    // },
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     this.setOptions(val);
    //   },
    // },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      if(!this.chart ){
        this.chart = echarts.init(document.getElementById("four"), "macarons");
      }
      this.chart.setOption ({
        // backgroundColor: '#fff',
        title: {
          text: 'Ⅳ类水',
          textStyle: {
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            // fontWeight: "bolder",
            fontSize: 12,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: 'item',
          // show: false,
        },
        color: ['rgba(255, 0, 0, 1)'],

        // radiusAxis: {
        // type: 'category',
        // data: ['a', 'b', 'c', 'd']
        // },

        series: [{
          name: 'Ⅳ类水',
          type: 'pie',
          startAngle: -90,
          hoverAnimation: false,
          radius: ["60%", "70%"],
          center: ['45%', '65%'],
          label: {
            normal: {
              show: true,
              position: 'center',
              color: '#fff',
              formatter: function(params) {
                return 7 +' \n '+'占比'+(7/24*100).toFixed(2) + '%'
              },
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value:24,
            itemStyle: {
              normal: {
                color: "rgba(255, 0, 0,0.1)"
              }
            }
          },
            {
              value: 7,
              itemStyle: {
                normal: {
                  color: "rgba(255, 0, 0,1)"
                }
              }

            },
            {
              value: 24-7,
              itemStyle: {
                normal: {
                  color: "rgba(255, 0, 0,0.1)"
                }
              }
            },
          ]
        }
        ]
      });
    },
  },
};
</script>
